<style>
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("images/loading_bar.gif") no-repeat center center #fff;
}
</style>
<script>
document.onreadystatechange = function (){
	var path = window.location.href;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
	var pageUrl		=	path;
	sessionStorage.setItem( 'pageUrl', JSON.stringify(pageUrl) );
  
  var state = document.readyState
  if (state == 'interactive') {
       document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
	   if(typeof sessionStorage["admin_user_id"]!='undefined'){
			document.getElementById('interactive');
			document.getElementById('load').style.visibility="hidden";
			document.getElementById('contents').style.visibility="visible";
		 }else{
			window.location="index.html";
		 }
      },300);
  }
}
</script>
<script src="js/chart.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script> 
<script src="js/webserviceurl.js"></script>
<script src="js/alert.js"></script>
<script src="js/modal.js"></script>
<script src="js/validations.js"></script>
<script src="js/pagination.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="js/commonfunctions.js"></script>
<script src="js/text.js"></script>
<link rel="stylesheet" href="css/pagination.css" />
<link href="css/style.css" rel="stylesheet">
<link href="css/default.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script>
$(function() {
$('#sidemenu').load('side-menu.html');
$('#header').load('header.html');
$('#footer').load('footer.html');
});
</script>
<div id="load"></div>
<div id="contents">
  <div id="header"></div>
    <div class="container-fluid">
      <div class="row-fluid container_bg">
      <div id="sidemenu"></div>
        <div class="span9">
			<div class="container_title">
				<div class=""><h1>Admin Reports</h1></div>
				<a href='reports.html'>Date Wise Orders</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='total-users-orders.html'>Users Orders Report</a>
				&nbsp;&nbsp;|&nbsp;&nbsp;<a href='total-users-report.html'>Total Users Report</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='shop-wise-reports.html'> Shop wise performance reports</a>
				<div class="container_form_top">
					From Date:<input type="text" id="fromdate" name="fromdate" readonly="readonly"><span id="errorFromdate" name="errorFromdate" style="color:red"></span></br></br>
					To Date:<input type="text" id="todate"  name="todate" readonly="readonly"><span id="errorTodate" name="errorTodate" style="color:red"></span></br></br>
					<div class="row">
						<div id="visualization" style="width: 100%; height: 400px;"></div>
					</div>
					<div class="row">
						<div id="visualization1" style="width: 100%; height: 400px;"></div>
					</div>
				</div>
			</div>
        </div>
      </div>
    </div>
<div id="footer"></div>
</div>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
 <script>
   $(function(){
		var dt = new Date();		
		var today_date = (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
			$("#fromdate").val(today_date);
			reportsFororder('from');
            $("#fromdate").datepicker({
                changeYear:true,
                   changeMonth:true,
                       //minDate : 0,
                onSelect: function(selected){
                               var date1 = $('#fromdate').datepicker('getDate');          
                               var date = new Date(Date.parse(date1));
                               date.setDate(date.getDate());        
                               var newDate = date.toDateString();
                               newDate = new Date(Date.parse(newDate));                      
                               $('#todate').datepicker("option","minDate",newDate);
							   reportsFororder('from');
                               return false;
                }
            });
            $("#todate").datepicker({
                       changeYear:true,
                   changeMonth:true,
                onSelect: function(selected){
                  $("#fromdate").datepicker("option","maxDate", selected);
				  reportsFororder('to');
                }				 
            });  
    });
	function reportsFororder(f_t){
	$('#visualization').html('Please wait loading....');
		var fromdate=$('#fromdate').val();
		var todate='';
		if(f_t=='to'){
			if(fromdate==''){
				$('#errorFromdate').html(reports_from_date);
				return false;
			}
			var todate=$('#todate').val();
		}
		$.ajax({
			type		:	'POST',
			url			:  	webServiceUrl+'totalreports',
			dataType	: 	"json",
			data		:	{from_date:fromdate,to_date:todate,reports_type:'null'},
			success: function(data){
				if(data.reports1!=0 || data.reports2!=0 || data.reports3!=0 || data.reports4!=0){
					var json='[["reports", "count"],';			
					var finall='';
					finall=finall+'["Pending Orders",'+data.reports1+']'+','+'["Proccessing Orders",'+data.reports2+']'+','+'["Proccessed Orders",'+data.reports3+']'+','+'["Cancelled Orders",'+data.reports4+']';
					finall=finall.replace(/,\s*$/, ",");
					json+=finall+']';
					var data = google.visualization.arrayToDataTable($.parseJSON(json));					 
					new google.visualization.PieChart(document.getElementById('visualization')).
					draw(data, {title:"Date Wise Orders"});
				}else{
					$('#visualization').html('No reports..');
				}
			}
		});
	}
</script>
